<template>
  <div class="goods-block">
    <van-cell :title="title" :icon="icon"></van-cell>
    <van-row type="flex" justify="center">
      <van-col span="7" class="goods_item" v-for="(item,i) in productList" :key="i" @click="onDetail(item)">
        <div class="image-container">
          <van-image :src="APIDomainName + item.pic" class="product-image"></van-image>
        </div>
        <div class="van-ellipsis product-title">{{item.title}}</div>
        <div class="price">￥{{item.price}}</div>
      </van-col>
    </van-row>
  </div>
</template>

<script>
  export default {
    name: "homeProduct",
    props: {
      title: {
        type: String,
        default: "商品",
      },
      icon: {
        type: String,
        default: null,
      },
      productList: {
        type: Array,
        default: () => []
      }
    },
    methods: {
      onDetail(item) {
        this.$router.push({ name: 'productDetail', query: { id: item.product_id } })
      }
    }
  }
</script>

<style lang="less" scoped>
  .goods-block {
    background-color: #f7f7f7;
    padding-bottom: 10px;

    .van-cell {
      font-size: 16px;
      background-color: #DCDEE0;
    }

    .goods_item {
      display: flex;
      flex-direction: column;
      margin: 6px;
      padding: 10px;
      background-color: white;
      border-radius: 10px;
      font-size: 14px;
      overflow: hidden;
      transition: all 0.3s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 初始阴影效果 */
      
      &:hover {
        transform: translateY(-3px); /* 悬停时轻微上浮 */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* 悬停时增强阴影 */
      }

      .image-container {
        overflow: hidden;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 图片容器阴影 */
      }

      .product-image {
        width: 100%;
        height: auto;
        transition: transform 0.3s ease;
        display: block;
        
        &:hover {
          transform: scale(1.05);
        }
      }

      .product-title {
        margin: 8px 0;
        color: #333;
        font-weight: 500;
        transition: color 0.3s ease;
      }

      .price {
        font-size: 18px;
        color: #ff4444;
        font-weight: bold;
        text-align: right;
        padding-right: 5px;
        margin-top: 5px;
      }
    }
  }
</style>